<template>
  <div class="login">
    <ElForm class="login-form">
      <h3 class="title">不动产登记系统</h3>
      <ElFormItem>
        <ElInput v-model="form.username" placeholder="账号"></ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElInput v-model="form.password" placeholder="密码"></ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElButton type="primary" class="btn" @click.prevent="handleLogin">登录</ElButton>
      </ElFormItem>
    </ElForm>
  </div>
</template>
<script setup lang="ts">
import { ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'
import useUserStore from '@/store/modules/userStore'
const router = useRouter()
let form = reactive({
  username: '',
  password: ''
})
const userStore = useUserStore()
function handleLogin() {
  userStore.login({ username: form.username, password: form.password }).then(() => {
    router.push('/')
  })
}
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url('../assets/images/login-background.jpg');
  background-size: cover;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 40px;
    input {
      height: 40px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}
</style>
